// 新增
import Base from "../base.js";
// 引入电影数据
import MoviesApi from "../../api/movies.js";

// 初始化表单信息
const moviesProps = [
    { name: "电影名", key: "cname" },
    { name: "电影英文名", key: "ename" },
    { name: "类型", key: "type" },
    { name: "首映地区", key: "area" },
    { name: "电影时长", key: "time" },
    { name: "上映时间", key: "upDate" },
    { name: "评分", key: "score" },
    { name: "票房", key: "count" },
    { name: "剧情简介", key: "intro" },
    { name: "是否是经典", key: "isClassic" },
    { name: "导演", key: "director" },
    { name: "演员", key: "actor" },
];
export default class extends Base {
    // 初始化数据   
    data = {
        student: {
            _id: "",
            cname: "蜡笔小新",
            ename: 'クレヨンしんちゃん',
            type: '',
            area: "日本",
            time: "24",
            upDate: "1996-3-14",
            score: "8.8",
            count: "暂无",
            intro: "暂无",
            isClassic: "",
            director: "本乡满",
            actor: "矢岛晶子",
        },
    };
    // 函数渲染
    render() {
        const { student } = this.data;
        this.$el.html(`
        <div style="text-align:center;">
            <h1 style="margin:20px auto;width:168px;font-weight:bold;">新增电影信息</h1>
            <!-- 新增表单信息 -->
            <form class="layui-form"  style="display:-webkit-box; flex-flow:wrap; margin: auto 50px; border: groove;padding:50px 100px;">
                ${moviesProps.map(item => {
            // 类型 多选框
            if (item.key === "type") {
                return ` 
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:revert;text-align: right; ">${item.name}</label>
                    <div class="layui-input-block" style="text-align: center;">
                        <select name="${item.key}" lay-verify="required" lay-search lay-filter="demo">
                        <option value="1" >请选择</option>
                        <option value="爱情">爱情</option>
                        <option value="喜剧">喜剧</option>
                        <option value="动画">动画</option>
                        <option value="剧情">剧情</option>
                        <option value="恐怖">恐怖</option>
                        <option value="惊悚">惊悚</option>
                        <option value="科幻">科幻</option>
                        <option value="动作">动作</option>
                        <option value="悬疑">悬疑</option>
                        <option value="犯罪">犯罪</option>
                        <option value="冒险">冒险</option>
                        <option value="战争">战争</option>
                        <option value="奇幻">奇幻</option>
                        <option value="运动">运动</option>
                        <option value="家庭">家庭</option>
                        <option value="古装">古装</option>
                        <option value="武侠">武侠</option>
                        <option value="西部">西部</option>
                        <option value="传记">传记</option>
                        <option value="歌舞">歌舞</option>
                        <option value="黑色电影">黑色电影</option>
                        <option value="短片">短片</option>
                        <option value="纪录片">纪录片</option>
                        <option value="音乐">音乐</option>
                        <option value="灾难">灾难</option>
                        <option value="青春">青春</option>
                        <option value="儿童">儿童</option>
                        <option value="其他">其他</option>
                        </select>
                    </div>
                </div>`
            };
            // 单选框
            if (item.key === "isClassic") {
                return `  
                    <div class="layui-form-item">
                    <label class="layui-form-label" style="width:revert;text-align:">${item.name}</label>
                    <div class="layui-input-inline" style="right;width: 168px; margin-right:0px;">
                        <input type="radio" name="gender" value="true" title="true" lay-filter="ChoiceRadio">
                        <input type="radio" name="gender" value="false" title="false" lay-filter="ChoiceRadio">
                    </div>
                    </div>
                    `
            }else if (item.key === "intro") {
                return `
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: auto;">${item.name}</label>
                    <div>
                    <textarea name="${item.key}" cols="91" rows="12"></textarea>
                    </div>
                </div>
                `
            }
            return `
                <!--渲染添加的数据-->
                <div class="layui-form-item" >
                <label class="layui-form-label" style="width: auto;">${item.name}</label>
                <div class="layui-input-block">
                    <input type="test" value="${student[item.key]}" name="${item.key}" required placeholder="请输入相关信息" lay-verify="required" class="layui-input" style="width: 204px;">
                </div>
                </div>`}).join("")}
                <div>
                    <div style="width: 114px;margin: auto;">
                        <button id="save-btn" type="reset" class="layui-btn">新增电影</button>
                    </div>
                </div>
            </form>
        </div>
    `);

    const form=layui.form;
    form.render();
    }
    
    // 上传图片
    upload() {
        // StudentApi.setStorage(this.data.student); // 获取到学生数据存储到本地 
        location.hash = `#/info/upload-imgs/${this.data.student._id}`;
    }

    // 新增
    async add() {
        const { cname, ename, type, area, time, upDate, score, count, intro, isClassic, director, actor, imgs } = this.data.student;
        this.data.student = await MoviesApi.add({ cname, ename, type, area, time, upDate, score, count, intro, isClassic, director, actor, imgs, ...{poster: ''} });
        layer.msg(`新增成功`);
        location.hash =`#/info/upload-imgs/${this.data.student._id}`;
       
    };

    // 添加事件
    handle() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const { student } = this.data;
        // lodash 针对表单进行事件绑定
        _.map(student, (v, k) => {
            if (k === "_id") {
                return;
            } else if (k === "intro") {
                // 获取用户绑定入的内容
                $(`textarea[name=${k}]`).on("input", e => {
                    // 每次输入拿到最新的值 在交给student对象
                    student[k] = e.target.value;
                });
            } else {
                // 获取用户绑定入的内容
                $(`input[name=${k}]`).on("input", e => {
                    // 每次输入拿到最新的值 在交给student对象
                    student[k] = e.target.value;
                });
                
            }
        });

        // 获取到按钮
        $("#save-btn").on("click", this.add.bind(this));
        $("#upload-btn").on("click", this.upload.bind(this));
        this.changeHandel();
        this.radioHandel();
    }

    // select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // this指向实例化对象
        const that = this;
        form.on('select(demo)', function (e) {
            // 获取到类型的值
            that.data.student.type = e.value;
        })
    }

    // 单选框监听事件
    radioHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function (data) {
            // 获取到单选框的值
            if(data.value=="true"){
                that.data.student.isClassic=true;
            }else{
                that.data.student.isClassic=false;
            }
        });
    }

}
